
import React from 'react'
import { render } from 'react-dom'
import { connect } from 'react-redux'
import TaskItem from './TaskItem'
import {actionInitTasksAsync} from '../../../store/action/actionTask'

// function TasksList(props) {
//     console.log('props',props);
//     const {tasks} = props
//     console.log('render')
//     return (
//         <div>
//             <ul>
//                 {
//                     tasks.map((item,index)=>{
//                         return <TaskItem  key={index} item={item} index={index}/>
//                     })
//                 }
//             </ul>
//         </div>
//     )
//   }

class TasksList  extends React.Component{
   
    render(){
        const {tasks} = this.props
        return (
            <div>
                <ul>
                    {
                        tasks.map((item,index)=>{
                            return <TaskItem  key={index} item={item} index={index}/>
                        })
                    }
                </ul>
            </div>
        )
    }

    //数据初始化: 网络数据
    componentDidMount(){
        const {initTasks} = this.props
        initTasks()
    }

  }

  const mapState = state=>({tasks:state.task.tasks})
  const mapDispatch = dispatch =>({
    //   initTasks:()=>dispatch({type:'initTasks'}) //直接到reducer
    initTasks:()=>dispatch(actionInitTasksAsync()) //派发一个函数
    //redex-thunk : 对action增强 action里可以执行函数 & 返回一个执行函数
    //              对diapatch增强 让dispatch可以派发函数 
    //   diapatch 派发=> action 生成的函数=>redex-thunk 依据action数据类型：对象 还是函数
    //   =>执行函数 异步操作 => 函数内部 对异步操作结果继续通过dispatch派发=> reducers
  })


  export default connect(mapState,mapDispatch)(TasksList)